<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }
        
        body {
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .calculator {
            width: 100%;
            max-width: 560px;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            max-height: 90vh;
        }
        
        .display-container {
            background: linear-gradient(135deg, #70519d 0%, #9393dc 100%);
            padding: 24px;
        }
        
        #current-expression {
            text-align: right;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 8px;
            height: 24px;
            overflow: hidden;
            font-size: 18px;
        }
        
        #display {
            text-align: right;
            font-size: 40px;
            font-weight: bold;
            min-height: 48px;
            overflow-x: auto;
            white-space: nowrap;
            color: white;
        }
        
        .buttons {
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            flex-grow: 1;
        }
        
        button {
            border: none;
            border-radius: 16px;
            padding: 16px;
            font-size: 24px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        button:hover {
            transform: scale(1.05);
        }
        
        button:active {
            transform: scale(0.95);
        }
        
        .number-btn {
            background-color: #F3F4F6;
            color: #1F2937;
        }
        
        .operator-btn {
            background-color: #F59E0B;
            color: white;
        }
        
        #clear {
            background-color: #EF4444;
            color: white;
        }
        
        #delete {
            background-color: #F3F4F6;
            color: #1F2937;
        }
        
        #equals {
            background-color: #10B981;
            color: white;
        }
        
        #zero {
            grid-column: span 2;
        }
        
        .history-container {
            padding: 16px;
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
            max-height: 120px;
            overflow-y: auto;
        }
        
        .history-container h3 {
            font-size: 16px;
            color: #6b7280;
            margin-bottom: 8px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .history-list {
            list-style: none;
        }
        
        .history-item {
            padding: 8px 0;
            border-bottom: 1px solid #f3f4f6;
            font-size: 14px;
        }
        
        .history-expression {
            color: #4b5563;
            margin-bottom: 4px;
        }
        
        .history-result {
            color: #111827;
            font-weight: 500;
            text-align: right;
        }
        
        .no-history {
            color: #9ca3af;
            text-align: center;
            padding: 16px 0;
            font-size: 14px;
        }
        
        #clear-history {
            background-color: #E5E7EB;
            color: #6B7280;
            font-size: 14px;
            padding: 4px 8px;
            border-radius: 6px;
            cursor: pointer;
            border: none;
        }
        
        #clear-history:hover {
            background-color: #D1D5DB;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display-container">
            <div id="current-expression"></div>
            <div id="display">0</div>
        </div>
        
        <div class="buttons">
            <button id="clear">C</button>
            <button id="delete"><i class="fa-solid fa-delete-left"></i></button>
            <button class="operator-btn" data-operator="%">%</button>
            <button class="operator-btn" data-operator="/">÷</button>
            
            <button class="number-btn" data-number="7">7</button>
            <button class="number-btn" data-number="8">8</button>
            <button class="number-btn" data-number="9">9</button>
            <button class="operator-btn" data-operator="*">×</button>
            
            <button class="number-btn" data-number="4">4</button>
            <button class="number-btn" data-number="5">5</button>
            <button class="number-btn" data-number="6">6</button>
            <button class="operator-btn" data-operator="-">−</button>
            
            <button class="number-btn" data-number="1">1</button>
            <button class="number-btn" data-number="2">2</button>
            <button class="number-btn" data-number="3">3</button>
            <button class="operator-btn" data-operator="+">+</button>
            
            <button id="zero" class="number-btn" data-number="0">0</button>
            <button class="number-btn" data-number=".">.</button>
            <button id="equals">=</button>
        </div>
        
        <div class="history-container">
            <h3>
                计算历史
                <button id="clear-history">清除</button>
            </h3>
            <ul class="history-list" id="history-list">
                <li class="no-history">暂无计算记录</li>
            </ul>
        </div>
    </div>

    <script>
        const display = document.getElementById('display');
        const currentExpression = document.getElementById('current-expression');
        const historyList = document.getElementById('history-list');
        const clearHistoryBtn = document.getElementById('clear-history');
        const numberButtons = document.querySelectorAll('[data-number]');
        const operatorButtons = document.querySelectorAll('[data-operator]');
        const equalsButton = document.getElementById('equals');
        const clearButton = document.getElementById('clear');
        const deleteButton = document.getElementById('delete');
        
        let currentValue = '0';
        let previousValue = '';
        let operator = null;
        let resetOnNextInput = false;
        let calculationHistory = [];
        
        function updateDisplay() {
            if (currentValue.length > 10 && !isNaN(parseFloat(currentValue))) {
                const num = parseFloat(currentValue);
                display.textContent = num.toExponential(5);
            } else {
                display.textContent = currentValue;
            }
            
            if (previousValue && operator) {
                currentExpression.textContent = `${previousValue} ${getOperatorSymbol(operator)} ${currentValue || ''}`;
            } else {
                currentExpression.textContent = '';
            }
        }
        
        function getOperatorSymbol(op) {
            const symbols = {
                '+': '+',
                '-': '−',
                '*': '×',
                '/': '÷',
                '%': '%'
            };
            return symbols[op] || op;
        }
        
        function addToHistory(expression, result) {
            const historyItem = {
                expression: expression,
                result: result,
                timestamp: new Date()
            };
            
            calculationHistory.unshift(historyItem);
            renderHistory();
        }
        
        function renderHistory() {
            historyList.innerHTML = '';
            
            if (calculationHistory.length === 0) {
                const noHistoryItem = document.createElement('li');
                noHistoryItem.className = 'no-history';
                noHistoryItem.textContent = '暂无计算记录';
                historyList.appendChild(noHistoryItem);
                return;
            }
            
            calculationHistory.forEach(item => {
                const li = document.createElement('li');
                li.className = 'history-item';
                
                const expression = document.createElement('div');
                expression.className = 'history-expression';
                expression.textContent = item.expression;
                
                const result = document.createElement('div');
                result.className = 'history-result';
                result.textContent = item.result;
                
                li.appendChild(expression);
                li.appendChild(result);
                historyList.appendChild(li);
            });
            
            historyList.scrollTop = 0;
        }
        
        function clearHistory() {
            calculationHistory = [];
            renderHistory();
        }
        
        function handleNumberInput(number) {
            if (resetOnNextInput) {
                currentValue = '0';
                resetOnNextInput = false;
            }
            
            if (number === '.') {
                if (!currentValue.includes('.')) {
                    currentValue += number;
                }
                updateDisplay();
                return;
            }
            
            if (currentValue === '0') {
                currentValue = number;
            } else {
                currentValue += number;
            }
            
            updateDisplay();
        }
        
        function handleOperatorInput(nextOperator) {
            if (operator && previousValue && !resetOnNextInput) {
                calculate();
                previousValue = currentValue;
                operator = nextOperator;
                resetOnNextInput = true;
            } else {
                previousValue = currentValue;
                operator = nextOperator;
                resetOnNextInput = true;
            }
            
            updateDisplay();
        }
        
        function calculate() {
            if (!operator || !previousValue) return;
            
            const prev = parseFloat(previousValue);
            const current = parseFloat(currentValue);
            const expression = `${previousValue} ${getOperatorSymbol(operator)} ${currentValue}`;
            
            if (isNaN(prev) || isNaN(current)) return;
            
            let result;
            
            switch (operator) {
                case '+':
                    result = prev + current;
                    break;
                case '-':
                    result = prev - current;
                    break;
                case '*':
                    result = prev * current;
                    break;
                case '/':
                    if (current === 0) {
                        result = "错误";
                    } else {
                        result = prev / current;
                    }
                    break;
                case '%':
                    result = prev % current;
                    break;
                default:
                    return;
            }
            
            if (typeof result === 'number') {
                if (result % 1 === 0) {
                    currentValue = result.toString();
                } else {
                    currentValue = result.toFixed(8).replace(/0+$/, '').replace(/\.$/, '');
                }
            } else {
                currentValue = result;
            }
            
            addToHistory(expression, currentValue);
            
            previousValue = '';
            operator = null;
            resetOnNextInput = true;
            
            updateDisplay();
        }
        
        function clearAll() {
            currentValue = '0';
            previousValue = '';
            operator = null;
            resetOnNextInput = false;
            calculationHistory = [];
            renderHistory();
            updateDisplay();
        }
        
        function deleteLastChar() {
            if (resetOnNextInput) {
                currentValue = '0';
                resetOnNextInput = false;
                updateDisplay();
                return;
            }
            
            if (currentValue.length > 1) {
                currentValue = currentValue.slice(0, -1);
            } else {
                currentValue = '0';
            }
            
            updateDisplay();
        }
        
        numberButtons.forEach(button => {
            button.addEventListener('click', () => {
                handleNumberInput(button.dataset.number);
            });
        });
        
        operatorButtons.forEach(button => {
            button.addEventListener('click', () => {
                handleOperatorInput(button.dataset.operator);
            });
        });
        
        equalsButton.addEventListener('click', calculate);
        clearButton.addEventListener('click', clearAll);
        deleteButton.addEventListener('click', deleteLastChar);
        clearHistoryBtn.addEventListener('click', clearHistory);
        
        document.addEventListener('keydown', (event) => {
            const key = event.key;
            
            if (/[0-9]/.test(key)) {
                event.preventDefault();
                handleNumberInput(key);
            }
            
            if (key === '.' || key === ',') {
                event.preventDefault();
                handleNumberInput('.');
            }
            
            if (['+', '-', '*', '/', '%'].includes(key)) {
                event.preventDefault();
                handleOperatorInput(key);
            }
            
            if (key === '=' || key === 'Enter') {
                event.preventDefault();
                calculate();
            }
            
            if (key === 'Backspace') {
                event.preventDefault();
                deleteLastChar();
            }
            
            if (key === 'Escape') {
                event.preventDefault();
                clearAll();
            }
        });
        
        updateDisplay();
    </script>
</body>
</html>
